<!DOCTYPE html>
<html lang="en">
    <head>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
        />
        <meta charset="UTF-8" />
        <title>Labyrinth</title>
        <style>
            .rebuild {
                width: 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #000000;
                color: #fff;
                font-size: 24px;
                margin-bottom: 20px;
                cursor: pointer;
            }
            .box-row {
                display: flex;
            }
            .white {
                background-color: white;
            }
            .black {
                background-color: black;
            }
            .box {
                border: 1px solid #222;
                height: 20px;
                width: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div @click="reset" class="rebuild">重置迷宫</div>
            <input type="number" min="3" v-model="height" />
            <input type="number" min="3" v-model="width" />
            <div>
                <div
                    class="box-row"
                    v-for="(row,index) in labyrinth"
                    :key="index"
                >
                    <div
                        :class="['box',box?'black':'white']"
                        v-for="(box,index1) in row"
                        :key='index+"-"+index1'
                    ></div>
                </div>
            </div>
        </div>
    </body>

    <script type="module">
        import { createMaze } from "../dist/index.js";
        import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.min.js";
        new Vue({
            el: "#app",
            data() {
                return { labyrinth: [[]], height: 3, width: 3 };
            },
            mounted() {
                this.reset();
            },
            watch: {
                width() {
                    this.reset();
                },
                height() {
                    this.reset();
                },
            },
            methods: {
                reset() {
                    this.labyrinth = createMaze(
                        parseInt(this.height),
                        parseInt(this.width),
                        "Konghayao"
                    );
                },
            },
        });
    </script>
</html>
